<template>
    <div id="max">
        <div>设置/账号管理/编辑账号</div>
        <div id="mid">
            <div>
                <div id="small">
                    <p id="wenzi">头像：</p>
                    <el-upload class="avatar-uploader" 
                    action="http://172.16.114.53:8080/districtUser/changeAvatar"
                        method="post" 
                        name="multipartFile"
                        :show-file-list="true" :on-success="handleAvatarSuccess">
                        <img v-if="touxiang" :src="touxiang" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <span>重新上传</span>
                        </el-icon>
                    </el-upload>
                    <!-- <img :src="touxiang" alt="" width="90" height="90"/> -->

                    <!-- <span id="touxiang">{{ touxiang }}</span> -->
                    <!-- <span id="shangchuan">重新上传</span> -->
                </div>
            </div>
            <div id="small">
                <p id="wenzi">姓名：</p>
                <div id="shuru">
                    <el-input v-model="input1" placeholder="请输入" />
                </div>
            </div>
            <div id="small">
                <p id="wenzi">性别：</p>
                <div id="rad">
                    <div class="my-2 flex items-center text-sm">
                        <el-radio-group v-model="radio1" class="ml-4">
                            <el-radio label="男">男</el-radio>
                            <el-radio label="女">女</el-radio>
                        </el-radio-group>
                    </div>
                </div>
            </div>

            <div id="small">
                <p id="wenzi">联系方式：</p>
                <div id="shuru">
                    <el-input v-model="input2" placeholder="请输入" />
                </div>
            </div>

            <div id="small">
                <p id="wenzi">所属组织：</p>
                <div id="shuru">
                    <el-select v-model="value1" class="m-2" placeholder="请选择" size="large">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
            </div>
            <div id="small">
                <p id="wenzi">所属角色：</p>
                <div id="shuru">
                    <el-select v-model="value2" class="m-2" placeholder="请选择" size="large">
                        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
            </div>

            <div id="small">
                <p id="wenzi">账号：</p>
                <div id="shuru">
                    <el-input v-model="input3" placeholder="请输入" />
                </div>
            </div>
            <div id="small">
                <p id="wenzi">密码：</p>
                <div id="shuru">
                    <el-input v-model="input4" placeholder="请输入" />
                </div>
            </div>
            <div id="small">
                <p id="wenzi">出身年月：</p>
                <div id="shuru">
                    <el-input v-model="input5" placeholder="请输入" />
                </div>
            </div>
            <div id="small">
                <p id="wenzi">是否为组长：</p>
                <div id="rad">
                    <div class="my-2 flex items-center text-sm">
                        <el-radio-group v-model="radio2" class="ml-4">
                            <el-radio label="是">是</el-radio>
                            <el-radio label="否">否</el-radio>
                        </el-radio-group>
                    </div>
                </div>
            </div>
        </div>
        <div id="bottom">
            <router-link to="/zhanghaoguanli">
                <el-button size="large">取消</el-button>
            </router-link>
            <el-button type="primary" size="large" @click="defineEdit()">确定</el-button>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import axios from '@/util/http'
import type { UploadProps } from 'element-plus';

export default defineComponent({
    name: 'zhanghaobianji',
    setup() {
        const router = useRoute();
        const data = eval("(" + router.query.key + ")")//接参
        let a = () => {
            console.log("======");
            console.log(router.query.key)
            // let data=JSON.parse(JSON.stringify(router.query.key))
            // console.log( data);
            // let data=eval("("+router.query.key+")")
        };
        onMounted(() => {
            a()
        })
        const touxiang = ref(data.headPortrait);//头像
        const input1 = ref(data.userName);//姓名
        const input2 = ref(data.phone);//联系方式
        const input3 = ref(data.nickname);//账号
        const input4 = ref(data.password);//密码
        const input5 = ref(data.birthday);//出生年月


        const radio1 = ref(data.sex);//性别
        const radio2 = ref(data.isLeader);//组长

        const value1 = ref(data.organization);//所属组织
        const value2 = ref(data.role);//所属角色
        const options1 = [ {
                value: '元和街道/娄北社区',
                label: '元和街道/娄北社区',
            },
            {
                value: '相城区疾控中心',
                label: '相城区疾控中心',
            },
            {
                value: '姑苏区疾控中心',
                label: '姑苏区疾控中心',
            },
            {
                value: '病例流调组',
                label: '病例流调组',
            },
            {
                value: '密接排查组',
                label: '密接排查组',
            }
            // {
            //     value1: 'Option1',
            //     label: '元和街道/娄北社区',
            // },
            // {
            //     value1: 'Option2',
            //     label: '元和街道/娄北社区',
            // },
            // {
            //     value1: 'Option3',
            //     label: '元和街道/娄北社区',
            // },
            // {
            //     value1: 'Option4',
            //     label: '元和街道/娄北社区',
            // },
            // {
            //     value1: 'Option5',
            //     label: '元和街道/娄北社区',
            // }
        ];
        const options2 = [
        {
                value: '居家检测员',
                label: '居家检测员',
            },
            {
                value: '区级管理员',
                label: '区级管理员',
            },
            {
                value: '疾控排查员',
                label: '疾控排查员',
            },
            {
                value: '疾控登记员',
                label: '疾控登记员',
            },
            {
                value: '隔离点工作人员',
                label: '隔离点工作人员',
            }
        ];

        const handleAvatarSuccess: UploadProps['onSuccess'] = (
            response,
            uploadFile
        ) => {
            touxiang.value = URL.createObjectURL(uploadFile.raw!)
        }
        //数据拿取
        function defineEdit() {
            axios({
                method:'post',
                url:'/districtUser/updateDistrictUser',
                data: {
                    birthday: input5.value,
                    creatTime: "2023-02-27T06:25:54.445Z",
                    creator: localStorage.role,
                    headPortrait: touxiang.value,
                    isLeader: radio2.value,
                    nickname: input1.value,
                    organization: value1.value,
                    password: input4.value,
                    phone: input2.value,
                    role: localStorage.role,
                    sex: radio1.value,
                    userId: data.userId,
                    userName: input3.value,
                    area: localStorage.area
                }
            }).then((res) => {
                console.log('保存成功');
            })
        }

        return {
            touxiang,
            input1,
            input2,
            input3,
            input4,
            input5,


            radio1,
            radio2,

            value1,
            value2,
            options1,
            options2,
            router,
            a,
            data,
            defineEdit,//确定编辑
            handleAvatarSuccess
        }
    }
})

</script>

<style scoped>
#max {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    color: #333;
}

#mid {
    display: flex;
    flex-direction: column;
    background-color: white;
    padding: 50px 30px;
    margin-top: 30px;
}

#small {
    display: flex;
    flex-direction: row;
    width: 500px;
    margin: 15px 0;
}

#shangchuan {
    display: flex;
    justify-content: center;
    align-items: center;
    color: blue;
    cursor: pointer;
}

#touxiang {
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
}

#wenzi {
    display: flex;
    justify-content: end;
    align-items: center;

    height: 40px;
    width: 100px;
}

#rad {
    display: flex;
    align-items: center;
}

#shuru {
    display: flex;
    align-items: center;
    width: 400px !important;
    height: 40px;
}

#bottom {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: white;
    padding: 50px;
}

.avatar-uploader .avatar {
    width: 80px;
    height: 80px;
    display: block;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}
</style>